
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css3最新鼠标划过样式</title>
    <link rel="stylesheet" href="css/button.css" />
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script src="css/rem.dev.js"></script>
</head>
<body>
<div id="workarea">
    <div class="position">

        <!--start button, nothing above this is necessary -->
        <div class="svg-wrapper">
            <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
                <rect  height="40" width="150" class="shape"/>
            </svg>
            <div class="text">
               botton
            </div>
        </div>
        <div class="svg-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg">
                <rect class="shape"/>
            </svg>
            <div class="text">
               botton
            </div>
        </div>
        <div class="svg-wrapper">
            <svg height="40" width="150" xmlns="http://www.w3.org/2000/svg">
                <rect  height="40" width="150" class="shape"/>
            </svg>
            <div class="text">
                bottom
            </div>
        </div>

    </div>
</div>
</body>
<script>
    window.onload=function () {
        document.querySelector(".position").onclick=function (e) {
            console.log(e.target.parentNode);
            var tar = e.target.parentNode;
            var all = document.querySelectorAll(".shape");
            for(var i =0;i<all.length;i++){
                all[i].classList.remove("run");
            }
            tar.querySelector(".shape").classList.add("run")
        }
    }
</script>
</html>